<template>
  <div>
    <ul>
      <li v-for="(message, index) in messageArray" :key="index">
        <router-link to="/home/messages/:id">{{message.title}}</router-link>
        <button>push查看</button>
        <button>replace查看</button>
      </li>
    </ul>
    <!--显示路由链接的内容-->
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name: "messages",
    data(){
      return{
        messageArray: []
      }
    },
    mounted: function () {
      var messages = [
        {
          id: 1,
          title: 'messages01'
        },
        {
          id: 2,
          title: 'messages02'
        },
        {
          id: 3,
          title: 'messages03'
        },
        {
          id: 4,
          title: 'messages04'
        },
        {
          id: 5,
          title: 'messages05'
        }
      ]

      this.messageArray = messages
    }
  }
</script>

<style scoped>

</style>
